<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="searchInpt"
        placeholder="输入ID/昵称/手机号"
        clearable
        @keyup.enter.native="search()"
        class="search-btn"
      >
        <el-button
          @click="search()"
          icon="el-icon-search"
          slot="append"
          :loading="searchLoading"
        >搜索</el-button>
      </el-input>
      <div class="lz-tips">
        <label>回复状态:</label>
      </div>
      <el-select
        v-model="feedbackValue"
        placeholder="千人计划"
        @change="getFeedbackData()"
      >
        <el-option
          v-for="item in feedbackOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="table_container">
      <el-table
        border
        v-loading="tableloading"
        :data="feedbackTableData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          property="userId"
          label="id"
          align="center"
          fixed
        >
        </el-table-column>
        <el-table-column
          property="nickName"
          label="用户昵称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="userName"
          label="手机号"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="问题描述"
          align="center"
          width="300"
        >
          <template slot-scope="scope">
            <span class="overFlow">
              {{scope.row.feedback}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          property="createTime"
          :formatter="formatterCreateTime"
          label="反馈时间"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="反馈状态"
          align="center"
        >
          <template slot-scope="scope">
            <span
              class="lz-span lz-success"
              v-if="scope.row.replayStatus == '1'"
            >已回复</span>
            <span
              class="lz-span lz-danger"
              v-else
            >未回复</span>
          </template>
        </el-table-column>
        <el-table-column
          label="历史反馈"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              @click="goFeedbackHistory(scope.row)"
              type="text"
              size="small"
            >查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="处理操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              @click="goReply(scope.row)"
              type="text"
              size="small"
            >立即回复</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div
        class="Pagination"
        style="text-align: left;margin-top: 10px;"
      >
        <el-pagination
          @current-change="currentChange"
          :current-page="currentPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="回复消息"
      :visible.sync="showReply"
      width="50%"
      center
    >
      <p class="问题">
        用户反馈：{{replyInfo.feedback}}
      </p>
      <p>
        用户ID：{{replyInfo.userId}} 手机号：{{replyInfo.userName}} 昵称：{{replyInfo.nickName}}
      </p>

      <hr>

      <el-form
        :model="replyData"
        ref="replyData"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="内容"
          prop="content"
          :rules="[{ required: true, message: '不能为空'}]"
        >
          <el-input
            type="textarea"
            v-model.number="replyData.content"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="doSendReply()"
          >发 送</el-button>
          <el-button @click="showReply = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { fetchGetFeedbackData, fetchReplyFeedbackData } from "@/api/table";
import { formatDateTime } from "@/utils/common";
export default {
  data() {
    return {
      count: 0,
      limit: 20,
      currentPage: 1,
      tableloading: false,
      searchInpt: "",
      searchLoading: false,
      feedbackValue: "2",
      feedbackOption: [
        {
          value: "0",
          label: "全部"
        },
        {
          value: "1",
          label: "已回复"
        },
        {
          value: "2",
          label: "未回复"
        }
      ],
      feedbackTableData: [],
      showReply: false,
      replyInfo: {},
      replyData: {
        title: "",
        content: ""
      }
    };
  },
  created() {
    this.getFeedbackData();
  },
  methods: {
    currentChange(val) {
      this.currentPage = val;
      this.getFeedbackData();
    },
    search() {
      this.currentPage = 1;
      this.pageshow = false;
      this.getFeedbackData();
      this.$nextTick(() => {
        this.pageshow = true;
      });
    },
    async getFeedbackData() {
      this.tableloading = true;
      const Users = await fetchGetFeedbackData({
        pageSize: this.limit,
        pageNo: this.currentPage,
        replyStatus: this.feedbackValue,
        key: this.searchInpt
      });
      this.tableloading = false;
      this.feedbackTableData = [];
      this.count = Users.data.total;
      if (Users.data.list) {
        Users.data.list.forEach(item => {
          const tableData = {};
          tableData.userId = item.userId;
          tableData.userName = item.userName;
          tableData.nickName = item.nickName;
          tableData.feedback = item.feedback;
          tableData.createTime = item.createTime;
          tableData.replyTime = item.replyTime;
          tableData.feedBackId = item.feedBackId;
          tableData.replayStatus = item.replayStatus;
          this.feedbackTableData.push(tableData);
        });
      }
    },
    formatterCreateTime(row) {
      if (row.createTime) {
        return formatDateTime(row.createTime);
      } else {
        return "";
      }
    },
    formatterReplyTime(row) {
      if (row.replyTime) {
        return formatDateTime(row.replyTime);
      } else {
        return "";
      }
    },
    goReply(data) {
      this.showReply = true;
      this.replyInfo = {};
      this.replyData.content = "";
      this.replyInfo.userId = data.userId;
      this.replyInfo.nickName = data.nickName;
      this.replyInfo.userName = data.userName;
      this.replyInfo.feedback = data.feedback;
      this.replyInfo.feedBackId = data.feedBackId;
    },
    async doSendReply() {
      const res = await fetchReplyFeedbackData({
        feedBackId: this.replyInfo.feedBackId,
        reply: this.replyData.content
      });
      if (res.status == "200") {
        this.showReply = false;
        this.getFeedbackData();
        this.$message({
          type: "success",
          message: "回复成功"
        });
      } else {
        this.$message({
          type: "error",
          message: "回复失败"
        });
      }
    },
    goFeedbackHistory(data) {
      this.$router.push({
        path: "feedbackHistory",
        query: {
          userId: data.userId,
          nickName: data.nickName,
          userName: data.userName
        }
      });
    }
  }
};
</script>

<style lang="less">
.sendMagin {
  width: 400px;
  margin: 0 auto;
}
.last {
  text-align: right;
}
.overFlow {
  margin: 10px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
